<template>
	<view class="container">
	    <!-- index.wxml -->
		<view class="container_header">
			<view class="header_item" style="font-size: 40rpx;">语音转录结果：{{upload_status}}</view>
			<view class="header_item" style="font-size: 40rpx;">大模型解析结果：{{LLM_status}}</view>
			<view class="header_item" style="font-size: 40rpx;">场景选择</view>
			<view style="margin-top: 20rpx;">
				<radio-group style="display: flex;align-items: center; justify-content: space-between;" @change="changeMode">
					<label class="radio"><radio value="view1" checked="true" />场景1(抓小球)</label>
					<br></br>
					<label class="radio"><radio value="view2" />场景2(传送带复检)</label>
					<br></br>
					<!-- <label class="radio"><radio value="view3" />场景3</label>
					<br></br> -->
				</radio-group>
			</view>
		</view>
		
		<view class="text-box" scroll-y="true">
			<textarea class="text-area" placeholder-style="color:#ffffff" placeholder="指令录入文字内容在此展示" :disabled = "isDisabled" v-model="raw_text"/>
			<view class="button-container">
				<button class="checkDone" @click="checkOrder">确认指令</button>
				<button class="modify" @click="changeOrder">指令编辑</button>
			</view>
		</view>
		
	    <view class="shadow-box" v-show="speaking">正在录音，向上轻滑取消录音</view>
	    <view class="footer-bar">
			<button class="btn-speak" @touchstart="onStart" @touchend="onEnd" @touchmove="onMove" hover-class="btn-hover">
			    {{ speaking ? '录音中' : '指令录入' }}
			</button>
	    </view>
		
	</view>	
</template>

<script>
const recorderManager = uni.getRecorderManager();
	export default {
		data() {
			return {
				run_mode:"view1",
				speaking: false,
				is_clock: false,				
				//是否发送
				touchpoint: null,
				isCancel: false,
				upload_status:"未上传",
				LLM_status:"暂无解析结果",
				raw_text:"",
				isDisabled:true,
			}
		},
		methods: {
			onStart:function(e){
				console.log('录音开始');
				this.speaking = true,
				this.is_clock = true,
				this.touchpoint = e.touches[0],
				console.log(this.speaking);
				console.log(this.is_clock);
				console.log(this.touchpoint);
				//设置录音参数
				const options = {
				    duration: 60000,
				    sampleRate: 16000,
				    numberOfChannels: 1,
				    encodeBitRate: 48000,
				    format: 'mp3'
				};
				//开始录音
				recorderManager.start(options);
			},
			onEnd:function(){
			    recorderManager.stop(); //结束录音
			    console.log('录音结束');
			    console.log("是否上传："+this.is_clock);
				const isClock = this.is_clock;
			    recorderManager.onStop((res) => {
					console.log(isClock)
					//此时先判断是否需要发送录音
					if(isClock){
						console.log("开始上传")
						//进行语音发送
						const { tempFilePath } = res;
						uni.showLoading({
							title: '正在上传中',
							icon: 'none',
							duration: 500
						});
						//上传录制的音频
						uni.uploadFile({
							// url: 'http://192.168.1.205:8080/voice',
							url: 'http://192.168.8.191:5000/voice',
							filePath: tempFilePath,
							name: 'voice',
							header: {
								'Content-Type': 'multipart/form-data'
							},
							//参数绑定
							formData: {
								id: '10000'
							},
							success: (event) => {
								uni.showToast({
									icon: 'none',
									duration: 1000
								});
								this.upload_status = "上传完成"
								this.raw_text = event.data
								//console.log(event.data)
								console.log(this.raw_text)
								console.log(this.upload_status)

							},
							fail: (event) => {
								uni.showToast({
									title: '上传失败',
									icon: 'none',
									duration: 1000
								});
								this.upload_status = "上传失败"
								this.raw_text = "由于上传失败，无内容"
								console.log(this.upload_status)
							}
						});
					}
					
			 
			    });
				this.speaking = false,
				this.is_clock = false,
				this.isCancel = false,
				console.log(1)
				console.log(this.raw_text)
				this.$forceUpdate()
		},
		
			onMove:function(e) {
		        console.log(this.is_clock);
		        if (Math.abs(e.touches[e.touches.length - 1].clientY - this.touchpoint.clientY) > 50) {
		            console.log('上划取消');
					this.is_clock = false,
					this.isCancel = true,
		            console.log(this.is_clock);
		            uni.showToast({
		                title: '取消上传',
		                icon: 'error',
		                duration: 1500
		            });
					this.upload_status = "取消上传"
					this.raw_text = "由于上传取消，无内容"

		        }
		    },
			//改变模式的方法
			changeMode:function(e){
				this.run_mode = e.detail["value"]
				console.log(this.run_mode)
			},
			
			
			//命令修正的方法
			changeOrder:function(e){
				this.isDisabled = false
				this.$forceUpdate()
			},
			checkOrder:async function(e){
				this.isDisabled = true
				const correct_text = this.raw_text
				if (this.run_mode == "view1"){
					uni.request({
						url: 'http://192.168.1.199:5000/getLLManswer',
						method:"POST",
						header:{
							'Content-Type':'application/json',
						},
						data: {
						        text: correct_text
						    },
						success: async(event) => {
							console.log(event.data.app_workflow)
							console.log(event.data.serviceId)
							if(event.data.status_code == 200){
								this.LLM_status = "完成，正在调度"
								await uni.setStorageSync('workflow',event.data.app_workflow);
								await uni.setStorageSync('current_serviceID',event.data.serviceId);
								await uni.setStorageSync('instruction',this.raw_text);
								await uni.$emit('refresh')
								//this.raw_text = JSON.stringify(event.data.llmResult,null,2);
							}else{
								this.LLM_status = "访问失败"
								uni.showModal({
									title:"错误消息",
									content: event.data.message,
									showCancel:false
								})
							}
						},
						fail: (event) => {
							this.LLM_status = "访问大模型失败"
						}
					})
				}else if(this.run_mode == "multi_mode"){
					uni.request({
						url: 'http://192.168.1.205:5000/getLLManswer_multirobot',
						method:"POST",
						header:{
							'Content-Type':'application/json',
						},
						data: {
						        text: correct_text
						    },
						success: async(event) => {
							console.log(event.data.app_workflow)
							console.log(event.data.serviceId)
							if(event.data.status_code == 200){
								this.LLM_status = "访问大模型成功"
								await uni.setStorageSync('multi_workflow',event.data.app_workflow);
								await uni.setStorageSync('multi_current_serviceID',event.data.serviceId);
								await uni.setStorageSync('multi_instruction',this.raw_text);
								await uni.$emit('refresh')
								uni.switchTab({
									url: '/pages/flow_chart_new/new_for_multirobot'
								});
							}else{
								this.LLM_status = "访问失败"
								uni.showModal({
									title:"错误消息",
									content: event.data.message,
									showCancel:false
								})
							}
						},
						fail: (event) => {
							this.LLM_status = "访问大模型失败"
						}
					})
				}else if(this.run_mode == "info_cali"){
					uni.request({
						url: 'http://192.168.1.205:5000/info_cali',
						method:"POST",
						header:{
							'Content-Type':'application/json',
						},
						data: {
						        text: correct_text
						    },
						success: async(event) => {
							console.log(event)
							var message = ''
							this.LLM_status = "信息采集需求成功"
							for(var i = 0;i < event.data.hosts.length;i++ ){
								if(event.data.hosts[i]["status"] == "error"){
									this.LLM_status = "信息采集需求失败"
								}
								message += event.data.hosts[i]["host"] + ":"+ event.data.hosts[i]["status"] + "\n"
							}
							console.log(message)
							uni.showModal({
								title:"后台消息",
								content: message,
								showCancel:false
							})
							// if(event.data.status_code == 200){
							// 	this.LLM_status = "信息采集需求成功"
							// }else{
							// 	this.LLM_status = "信息采集需求失败"
							// 	uni.showModal({
							// 		title:"错误消息",
							// 		content: event.data.message,
							// 		icon: 'error',
							// 		duration: 2000
							// 	})
							// }
						},
						fail: (event) => {
							this.LLM_status = "访问大模型失败"
						}
					})
				}else if (this.run_mode == "open_grab"){
					uni.request({
						url: 'http://192.168.1.205:5000/open_grab',
						method:"POST",
						header:{
							'Content-Type':'application/json',
						},
						data: {
						        text: correct_text
						    },
						success: async(event) => {
							console.log(event)
							if(event.data.status_code == 200){
								this.LLM_status = "开放抓取需求成功"
							}else{
								this.LLM_status = "开放抓取需求失败"
								// uni.showModal({
								// 	title:"错误消息",
								// 	content: event.data.message,
								// 	showCancel:false
								// })
							}
						},
						fail: (event) => {
							this.LLM_status = "访问大模型失败"
						}
					})
				
				}else{
					uni.request({
						url: 'http://192.168.1.205:5000/rule_engine',
						method:"POST",
						header:{
							'Content-Type':'application/json',
						},
						data: {
						        text: correct_text
						    },
						success: async(event) => {
							console.log(event)
							if(event.data.status_code == 200){
								this.LLM_status = "规则引擎需求成功"
							}else{
								this.LLM_status = "规则引擎需求失败"
								uni.showModal({
									title:"错误消息",
									content: event.data.message,
									showCancel:false
								})
							}
						},
						fail: (event) => {
							this.LLM_status = "访问大模型失败"
						}
					})
				}
				
				console.log("调用大模型完毕")
				this.$forceUpdate()
			}
		}
	}
</script>

<style lang="less">
	.container{
		height:100vh;
		width: 100vw;
		background: linear-gradient(to bottom, #001f3f 0%, #2e5fac 50%, #448cff 100%);
		padding:12px;
		overflow: auto;
		box-sizing: border-box;
		color: #fff;
		.container_header{
			background-color: rgba(255, 255, 255, 0.3);
			padding: 24rpx;
			box-sizing: border-box;
			border-radius: 4px;
			.header_item{
				margin-bottom: 12rpx;
			}
		}
		
	}
/**index.wxss**/
.radio{
	margin-left: 5%;
	margin-top: 5rpx;
	line-height:20rpx ;
}
.shadow-box {
    width: 300rpx;
    height: 100rpx;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 60%;
	padding: 24rpx;
        left: 50%;
        border-radius: 0.3125rem;
        transform: translateX(-50%);
        text-align: center;
}
.footer-bar {
    width: 20vw;
	margin: 0 auto;
	margin-top: 150px;
    height: 130rpx;
    // background-color: #ffffff;
}
.btn-speak {
 //    display: flex;
	// width: 250rpx;
	// height: 110rpx;
 //    align-items: center;
 //    justify-content: center;
 //    margin-top: 10rpx;
 //    font-size: 30rpx;
 //    color: #000000;
 //    text-align: center;
}
.btn-hover {
    background-color: aquamarine;
}
.button-container {
  display: flex;
  margin-top: 40rpx;
}

.text-box{
	margin-top: 40rpx;
	background-color: rgba(255, 255, 255, 0.3);
	padding: 24rpx 0;
	border-radius: 4px;
	.text-area{
		width: 80%;
		margin-left: 10%;
		border-radius: 4px;
		height: 300rpx;
		border: 1px solid #fff; /* 添加边框样式，可以根据需要调整颜色和边框宽度 */
		padding: 8px; /* 可以根据需要调整内边距 */
		box-sizing: border-box; /* 使内边距和边框计入总宽度，防止超出容器宽度 */
	}
}
.bottom{
    position: fixed;
	display: flex;
    bottom:0px;
    border-top:1px solid #d2d2d2;
    background-color: #f2f2f2;
    width: 100%;
    height:50rpx;
  }
  .item{
	border: #99ccff 1rpx solid;
	display: flex;
	margin: 5rpx;
	width: 50%;
    float:left;
  }
  .item p{
    margin-left:30%;
    font-size: 15px;
  }
  .active{
    color:#108b70;
  }

</style>
